import React, { useState } from 'react'
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'
import moduleName from 'react-redux'
const Img = () => {
  let [num, setNum] = useState(100);

  const ImagehahahLeftBut = () => {
    if (num < 100) {
      num = num + 100
      setNum(num)
    }
  }

  const ImagehahahRightBut = () => {
    if (num > -900) {
      num = num - 100
      setNum(num)
      console.log(num);
    }
  }
  return (
    <div className='Imagehahah'>
      <button onClick={ImagehahahLeftBut} className='ImagehahahLeftBut'><CaretLeftOutlined /></button>
      <div style={{ scrollBehavior: 'smooth', transition: 'transform 1s ease' }} className='imgsss'>
        <div style={{ left: `${num}px`, transition: 'left 0.3s ease', position: 'absolute', display: 'flex', marginLeft: '10px', scrollBehavior: 'smooth' }}>
          <div>科技</div>
          <div>商务</div>
          <div>美食</div>
          <div>教育</div>
          <div>背景</div>
          <div>风景</div>
          <div>纯色</div>
          <div>书籍</div>
          <div>植物</div>
          <div>城市</div>
          <div>电商</div>
          <div>服务</div>
          <div>金融</div>
          <div>地产</div>
        </div>
      </div>
      <button onClick={ImagehahahRightBut} className='ImagehahahRightBut'><CaretRightOutlined /></button>
    </div>
  )
}

export default Img
